You can use the ::before pseudo-element to insert quotation marks or other decorative symbols before a paragraph. This allows you to add visual cues without changing the HTML content.

Key Points

1
Use ::before with the content property to insert the quotation mark, e.g., content: '“';.
2
Set position: relative on the parent if you need precise control over placement.
3
Style the pseudo-element with font-size, color, margin, or transform to match your design.
4
Combine with ::after for closing quotation marks if needed.

Example: Quotation Mark Before Paragraph

In this example, the ::before pseudo-element inserts a gray quotation mark before the paragraph. You can adjust font-size, color, and position to match your layout and style preferences.

Best Practices

1
Use pseudo-elements for purely decorative symbols to avoid altering semantic HTML.
2
Ensure the quotation mark does not overlap text by adjusting padding or positioning.
3
Combine with ::after for closing quotes if needed for visual consistency.
4
Test across different screen sizes and browsers for proper alignment and display.

Difficulty: 3/10

Topics: pseudo-elements, CSS quotes, content property

Scenario Questions

0-2 years experience

1
How would you add an opening quotation mark before every paragraph using only CSS, without touching the HTML?
2
What happens if you forget to set display: block on the paragraph when using ::before to add a quote?

2-5 years experience

1
A designer says the blockquote quotes look broken on mobile — the ::before quote is overlapping the text. How do you debug and fix this?
2
We’re using ::before to add quotes in a CMS-generated blog, but sometimes the quote appears even when there’s no paragraph content. How do you prevent that?

5-8 years experience

1
We’re building a multilingual content system where quote styles vary by locale — how would you architect the CSS to support this without bloating the stylesheet?
2
A performance audit shows our ::before quote styles are causing layout thrashing on low-end devices. What’s the root cause and how do you optimize it?

8+ years experience

1
Our legacy design system uses ::before for quotes across 20+ products — we’re migrating to a design token system. How do you plan the deprecation and ensure no visual regressions?
2
We need to support screen readers properly while keeping visual quotes via CSS. How do you balance accessibility, maintainability, and design consistency at scale?

Follow-up Questions

❓What happens if the paragraph is inside a nested container with its own ::before styles?
❓How would you handle this if the quote needed to change based on language?
❓Why wouldn’t you just use an actual quote character in the HTML?